<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<a id="btn" href="javascript:;">按钮</a><br>
	<ul id="ul" style="display: none;">
		<li id="li1">111111</li>
		<li id="li2">222222</li>
		<li id="li3">333333</li>
		<li id="li4">444444</li>
	</ul>



	<script type="text/javascript">
	
		window.onload = function(){
			$('#btn').click(function(event){
				$('#ul').fadeToggle();
				event.stopPropagation();
			});
			$(document).click(function(){
				$('#ul').fadeOut();
			});
		}
		
	</script>


	<!-- jQuery -->
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</body>
</html>